<template>
	<div class="zc">
		<header>
			<i class="el-icon-notebook-2"> 用户注册</i>
		</header>
		<div style="display: flex;">
			<div style="width: 48%;display:flex; justify-content:center; align-items:center;">
				<div>
					<div style="width: 30vw; height: 30vw; border: 1px solid #DCDFE6;">
						<el-image :src="`/api/public/showimg/${form.img}`" style="width: 100%;height: 100%;">
						</el-image>
					</div>
					<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
						:before-upload="beforeAvatarUpload" :file-list="fileList" :on-change="handleChange"
						action="uploadAction" list-type="picture" accept="image/jpg,image/jpeg">
						<h3>点击这里更新图片</h3>
					</el-upload>
				</div>
			</div>
			<div style="width: 45%;">
				<el-form ref="form" :model="form" :rules="formRule" label-width="100px" size="small"
					label-position="left">
					<el-form-item label="账号" prop="account">
						<el-input v-model="form.account"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input v-model="form.password"></el-input>
					</el-form-item>
					<el-form-item label="密码确认" prop="password2">
						<el-input v-model="form.password2"></el-input>
					</el-form-item>
					<el-form-item label="姓名昵称" prop="nickname">
						<el-input v-model="form.nickname"></el-input>
					</el-form-item>
					<el-form-item label="手机号" prop="phone">
						<el-input v-model="form.phone"></el-input>
					</el-form-item>
					<el-form-item label="vip客户">
						<el-select v-model="form.vip" placeholder="vip">
							<el-option v-for="x in optVip" :key="x.v" :label="x.b" :value="x.v">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="地址" prop="addr">
						<el-input type="textarea" :rows="4" placeholder="请输入信息" v-model="form.addr">
						</el-input>
					</el-form-item>
				</el-form>
				<div @click="submit()" style="display: flex; justify-content: flex-end; height: 40px; ">
					<el-button size="medium">
					注册新用户</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'PcZc',
		data() {
			return {
				optVip: [{
					v: 0,
					b: '普通客户'
				}, {
					v: 1,
					b: 'vip客户'
				}],
				form: {
					id: 0,
					account: '',
					password: '',
					nickname: '',
					vip: 0
				},
				fileList: [],
				formRule: {
					account: [{
							required: true,
							message: '请输入',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 16,
							message: '长度 3 到 16 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 16,
							message: '长度 3 到 16 个字符',
							trigger: 'blur'
						}
					],
					password2: [{
							required: true,
							message: '请输入',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 16,
							message: '长度 3 到 16 个字符',
							trigger: 'blur'
						}
					],
					nickname: [{
							required: true,
							message: '请输入',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 16,
							message: '长度 3 到 16 个字符',
							trigger: 'blur'
						}
					],
					phone: [{
							required: true,
							message: '请输入',
							trigger: 'blur'
						},
						{
							min: 7,
							max: 16,
							message: '长度 7 到 16 个字符',
							trigger: 'blur'
						}
					],
					addr: [{
							required: true,
							message: '请输入',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 64,
							message: '长度 3 到 64 个字符',
							trigger: 'blur'
						}
					],
				}
			}
		},
		methods: {
			handleChange(file, fileList) {
				this.fileList = fileList;
			},

			beforeAvatarUpload(file) {},
			submit() {
				
				if (this.form.addr.length < 4 || this.form.addr.length < 4 ||
					this.form.account.length < 3 || this.form.nickname.length < 2 || this.form.password.length < 3) {
					this.$message.warning("信息输入不完整或长度不够");
					return;
				}
				let formData = new FormData();
				if (this.fileList.length > 0 && this.fileList[0].raw != null) {
					formData.append("mypic", this.fileList[0].raw);
				}
				formData.append("account", this.form.account);
				formData.append("password", this.form.password);
				formData.append("nickname", this.form.nickname);
				formData.append("phone", this.form.phone);
				formData.append("vip", this.form.vip);
				formData.append("addr", this.form.addr);
				this.$postk("/api/public/addUser", formData).then(resp => {
					this.$message.error(resp.data.msg);
					console.log(resp.data.data);
					if (resp.data.code == 200) {
						this.form = resp.data.data;
						console.log(this.form);
					}
				})
			}
		},
		mounted() {}
	}
</script>

<style scoped>
	.zc{
		width: 100%;
		margin-top: 40px;
		    margin-right: 8%;
		    margin-left: 8%;
		    min-height: 88vh;
	}
	.zc header {
		margin: 10px auto;
		width: 90%;
		text-align: center;
		border-bottom: 1px solid blue;
	}
	/deep/.el-textarea__inner{
		resize: unset;
	}
</style>